<template>
  <div class="mypoints">
    <div class="mypoints_bgc">
      <el-row class="row-bg" justify="space-between">
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="8">
          <div style="text-align: center">
            <div class="currency">123</div>
            <div class="point">当前积分</div>
            <div class="register" @click="register">签到</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="mypoints_btn">
            <span class="dynasty" @click="breakdown">积分明细</span>
            <span class="dynasty">积分规则</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="mypoints_cont">
      <div class="mypoints_top">
        <div class="mypoints_t">
          <span class="ys"></span><span>积分任务</span>
        </div>
      </div>
      <div class="mypoints_bottom">
        <!--  -->

        <div class="mypoints_b_con">
          <img style="width: 50px; height: 50px" src="@/assets/img/mypoints/zhuce.png" alt="" />
          <div style="flex: 1; padding-left: 10px">
            <div class="mypoints_b_yq">
              <div style="font-size: 14px; font-weight: bold; color: #333333">
                邀请好友注册
              </div>
              <div style="font-size: 14px; color: #ff4848">
                +{{ useRouters.bonus.inviting_reg }}积分
              </div>
            </div>
            <div class="mypoints_b_size">发送邀请给好友完成注册各得200积分</div>
          </div>
          <div class="attend" @click="dialogVisible1 = true">去邀请</div>
        </div>
        <div class="mypoints_b_con">
          <img style="width: 50px; height: 50px" src="@/assets/img/mypoints/youx.png" alt="" />
          <div style="flex: 1; padding-left: 10px">
            <div class="mypoints_b_yq">
              <div style="font-size: 14px; font-weight: bold; color: #333333">
                首次绑定邮箱
              </div>
              <div style="font-size: 14px; color: #ff4848">
                +{{ useRouters.bonus.bind_email }}积分
              </div>
            </div>
            <div class="mypoints_b_size">填写正确的邮箱地址并完成邮箱验证</div>
          </div>
          <div class="together">去绑定</div>
        </div>
        <div class="mypoints_b_con">
          <img style="width: 50px; height: 50px" src="@/assets/img/mypoints/gsxx.png" alt="" />
          <div style="flex: 1; padding-left: 10px">
            <div class="mypoints_b_yq">
              <div style="font-size: 14px; font-weight: bold; color: #333333">
                填写公司信息
              </div>
              <div style="font-size: 14px; color: #ff4848">
                +{{ useRouters.bonus.fill_in_company }}积分
              </div>
            </div>
            <div class="mypoints_b_size">首次完成公司信息填写可获得</div>
          </div>
          <div class="together">去填写</div>
        </div>

        <div class="mypoints_b_con">
          <img style="width: 50px; height: 50px" src="@/assets/img/mypoints/zhucecg.png" alt="" />
          <div style="flex: 1; padding-left: 10px">
            <div class="mypoints_b_yq">
              <div style="font-size: 14px; font-weight: bold; color: #333333">
                新用户注册
              </div>
              <div style="font-size: 14px; color: #ff4848">
                +{{ useRouters.bonus.new_user_reg }}积分
              </div>
            </div>
            <div class="mypoints_b_size">手机号快速完成注册</div>
          </div>
          <div class="enroll">已完成</div>
        </div>
      </div>
    </div>
    <!-- 积分明细 -->
    <el-dialog v-model="dialogVisible" title="积分明细" width="30%" style="height: 387px" :before-close="handleClose">
      <div style="padding: 0 20px">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabulationClick">
          <el-tab-pane label="积分获取" name="1">
            <Playlist :list="activeNames" />
          </el-tab-pane>
          <el-tab-pane label="积分消耗" name="2">
            <Playlist :list="activeNames" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 去邀请 -->
    <el-dialog v-model="dialogVisible1" title="邀请好友" width="25%" :before-close="handleClose" align-center draggable
      style="height: 150px">
      <div class="mt-4">
        <el-input v-model="input3" placeholder="链接" style="width: 440px; margin: 20px">
          <template #append>
            <el-button style="background: #2e8d93; color: #fff">
              分享好友
            </el-button>
          </template>
        </el-input>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Playlist from "../playlist/index.vue";
import { useRouterStore } from "@/pain/router/index.js";
import { tabulation, todaySign } from "@/Api/api.js";
import { ElMessage } from "element-plus";
const useRouters = useRouterStore();
const activeName = ref("1");
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const input3 = ref("");
let activeNames = ref({});
import { decrypt } from "@/utils/index";
const tokens = localStorage.getItem("token")
let token
if (tokens) {
  userInfo().then(rex => {
    token = rex.data.data
  })
}
const handleClose = (done) => {
  done();
};
const breakdown = () => {
  dialogVisible.value = true;
  tabulationClick();
};

const tabulationClick = (data) => {
  let params = {
    change_status: data?.props.name || activeName.value,
    clientid: token.clientid,
  };
  tabulation(params).then((res) => {
    let {
      data: { data },
    } = res;
    activeNames.value = data;
  });
};

// 签到
const register = () => {
  let parmse = {
    clientid: token.clientid,
  };
  todaySign(parmse).then((res) => {
    let {
      data: { msg },
    } = res;
    ElMessage({
      showClose: true,
      message: msg,
      type: "success",
    });
  });
};
onMounted(() => {
  useRouters.allocationLiss();
});
</script>

<style lang="scss" scoped>
.mypoints {
  height: 940px;
  padding: 20px;
  background-color: #fff;

  .mypoints_bgc {
    width: 100%;
    height: 180px;
    padding-top: 10px;
    background: url("@/assets/img/mypoints/myjf.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    .currency {
      width: 90px;
      height: 90px;
      margin: 15px auto 10px;
      font-size: 32px;
      font-family: "DIN Alternate";
      border: 2px solid #ffffff;
      line-height: 90px;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      border-radius: 50%;
      color: #ffffff;
    }

    .point {
      font-size: 18px;
      font-family: "Source Han Sans CN";
      color: #ffffff;
      text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    }

    .register {
      width: 120px;
      height: 40px;
      margin: 15px auto 0;
      line-height: 40px;
      font-size: 18px;
      font-weight: bold;
      background: linear-gradient(90deg, #f8d39d 0%, #ffe5c4 51%, #f6c283 100%);
      border-radius: 8px;
      color: #9a5d34;
    }

    .mypoints_btn {
      text-align: right;

      .dynasty {
        padding: 2px 7px;
        margin-right: 10px;
        border-radius: 5px;
        background-color: #ffffff;
        font-size: 14px;
        color: #f88214;
      }
    }
  }

  .mypoints_cont {
    margin-top: 40px;

    .mypoints_top {
      border-bottom: 1px solid #dddddd;

      .mypoints_t {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .ys {
          width: 4px;
          height: 16px;
          margin-right: 10px;
          background-color: #f43107;
          border-radius: 10px;
        }
      }
    }

    .mypoints_bottom {
      display: flex;
      flex-wrap: wrap;

      .mypoints_b_con {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // width: 489px;
        width: 30.5625rem;
        // width: 33.3%;
        height: 80px;
        margin-right: 20px;
        margin-top: 20px;
        padding: 0 20px 0 15px;
        background-color: #f8f8f8;

        &:nth-child(3) {
          margin-right: 0;
        }

        .mypoints_b_yq {
          display: flex;
          justify-content: space-between;
          width: 200px;
          margin-bottom: 8px;
        }

        .mypoints_b_size {
          font-size: 12px;
          color: #a9b1be;
        }

        .attend {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 80px;
          height: 30px;
          background-color: #f5dcb2;
          border-radius: 4px;
          font-size: 16px;
          color: #9a5d34;
        }

        .together {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 80px;
          height: 30px;
          background-color: #ffffff;
          border: 1px solid #f43107;
          border-radius: 4px;
          font-size: 16px;
          color: #f43107;
        }

        .enroll {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 80px;
          height: 30px;
          background-color: #eeeeee;
          border-radius: 4px;
          font-size: 16px;
          color: #a9b1be;
        }
      }
    }
  }
}
</style>
